<template>
  <div class="home">
    <!-- 轮播图横幅 -->
    <section class="banner">
      <el-carousel indicator-position="outside" height="400px">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <img :src="item.image" :alt="item.title" />
          <div class="banner-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 快捷入口 -->
    <section class="quick-nav">
      <div class="container">
        <h2>快捷入口</h2>
        <div class="nav-grid">
          <router-link
            v-for="nav in quickNavs"
            :key="nav.path"
            :to="nav.path"
            class="nav-item"
          >
            <el-icon class="nav-icon"><component :is="nav.icon" /></el-icon>
            <span>{{ nav.title }}</span>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 内容板块 -->
    <section class="content-sections">
      <div class="container">
        <div class="sections-grid">
          <!-- 招生要闻 -->
          <div class="section-card">
            <div class="section-header">
              <h3>招生要闻</h3>
              <router-link to="/articles?category=news">更多 ></router-link>
            </div>
            <div class="article-list" v-if="homeRecommended.news?.length">
              <div
                v-for="article in homeRecommended.news"
                :key="article.id"
                class="article-item"
                @click="goToArticle(article.id)"
              >
                <img v-if="article.coverImage" :src="article.coverImage" :alt="article.title" />
                <div class="article-info">
                  <h4>{{ article.title }}</h4>
                  <p>{{ article.summary }}</p>
                  <span class="article-date">{{ formatDate(article.publishTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 招生章程 -->
          <div class="section-card">
            <div class="section-header">
              <h3>招生章程</h3>
              <router-link to="/articles?category=regulations">更多 ></router-link>
            </div>
            <div class="article-list" v-if="homeRecommended.regulations?.length">
              <div
                v-for="article in homeRecommended.regulations"
                :key="article.id"
                class="article-item"
                @click="goToArticle(article.id)"
              >
                <div class="article-info">
                  <h4>{{ article.title }}</h4>
                  <span class="article-date">{{ formatDate(article.publishTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 入围信息 -->
          <div class="section-card">
            <div class="section-header">
              <h3>入围信息</h3>
              <router-link to="/articles?category=admission">更多 ></router-link>
            </div>
            <div class="article-list" v-if="homeRecommended.admission?.length">
              <div
                v-for="article in homeRecommended.admission"
                :key="article.id"
                class="article-item"
                @click="goToArticle(article.id)"
              >
                <div class="article-info">
                  <h4>{{ article.title }}</h4>
                  <span class="article-date">{{ formatDate(article.publishTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 考试大纲 -->
          <div class="section-card">
            <div class="section-header">
              <h3>考试大纲</h3>
              <router-link to="/articles?category=exam">更多 ></router-link>
            </div>
            <div class="article-list" v-if="homeRecommended.exam?.length">
              <div
                v-for="article in homeRecommended.exam"
                :key="article.id"
                class="article-item"
                @click="goToArticle(article.id)"
              >
                <div class="article-info">
                  <h4>{{ article.title }}</h4>
                  <span class="article-date">{{ formatDate(article.publishTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 录取名单 -->
          <div class="section-card">
            <div class="section-header">
              <h3>录取名单</h3>
              <router-link to="/articles?category=results">更多 ></router-link>
            </div>
            <div class="article-list" v-if="homeRecommended.results?.length">
              <div
                v-for="article in homeRecommended.results"
                :key="article.id"
                class="article-item"
                @click="goToArticle(article.id)"
              >
                <div class="article-info">
                  <h4>{{ article.title }}</h4>
                  <span class="article-date">{{ formatDate(article.publishTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 热门文章 -->
          <div class="section-card">
            <div class="section-header">
              <h3>热门关注</h3>
              <router-link to="/articles?hot=1">更多 ></router-link>
            </div>
            <div class="article-list" v-if="hotArticles.length">
              <div
                v-for="(article, index) in hotArticles"
                :key="article.id"
                class="article-item hot-item"
                @click="goToArticle(article.id)"
              >
                <span class="rank" :class="{ top: index < 3 }">{{ index + 1 }}</span>
                <div class="article-info">
                  <h4>{{ article.title }}</h4>
                  <span class="article-views">{{ article.viewCount }} 次浏览</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useArticleStore } from '@/stores/article'
import {
  School,
  Document,
  User,
  Money,
  Reading,
  TrophyBase,
  InfoFilled
} from '@element-plus/icons-vue'

const router = useRouter()
const articleStore = useArticleStore()

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '2025年浙江高职提前招生开始啦',
    description: '欢迎广大考生积极报名，实现高职梦想',
    image: '/banner1.jpg'
  },
  {
    id: 2,
    title: '47所优质院校等你来选择',
    description: '多元化专业设置，为你的未来保驾护航',
    image: '/banner2.jpg'
  },
  {
    id: 3,
    title: '招生信息实时更新',
    description: '第一时间获取最新招生动态和政策解读',
    image: '/banner3.jpg'
  }
])

// 快捷导航
const quickNavs = ref([
  { title: '提招院校', path: '/schools', icon: School },
  { title: '简章分数', path: '/admission/guidelines', icon: Document },
  { title: '报名入口', path: '/admission/registration', icon: User },
  { title: '入围信息', path: '/admission/qualified', icon: InfoFilled },
  { title: '缴费确认', path: '/admission/payment', icon: Money },
  { title: '校测考纲', path: '/admission/exam', icon: Reading },
  { title: '录取名单', path: '/admission/results', icon: TrophyBase }
])

// 首页推荐内容
const homeRecommended = computed(() => articleStore.homeRecommended)

// 热门文章
const hotArticles = computed(() => articleStore.hotArticles.slice(0, 6))

// 跳转到文章详情
const goToArticle = (id) => {
  router.push(`/articles/${id}`)
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN', {
    month: 'numeric',
    day: 'numeric'
  })
}

// 页面初始化
onMounted(async () => {
  await Promise.all([
    articleStore.fetchHomeRecommended(),
    articleStore.fetchHotArticles(10)
  ])
})
</script>

<style lang="scss" scoped>
.home {
  .banner {
    .el-carousel {
      .el-carousel__item {
        position: relative;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .banner-content {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          color: white;
          padding: 40px 60px;
          
          h2 {
            font-size: 28px;
            margin-bottom: 8px;
          }
          
          p {
            font-size: 16px;
            opacity: 0.9;
          }
        }
      }
    }
  }
  
  .quick-nav {
    padding: 60px 0;
    background: #f8f9fa;
    
    h2 {
      text-align: center;
      margin-bottom: 40px;
      color: #333;
    }
    
    .nav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 20px;
      max-width: 800px;
      margin: 0 auto;
      
      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px;
        background: white;
        border-radius: 12px;
        transition: all 0.3s;
        text-decoration: none;
        color: #333;
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }
        
        .nav-icon {
          font-size: 32px;
          color: #409eff;
          margin-bottom: 12px;
        }
        
        span {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }
  
  .content-sections {
    padding: 60px 0;
    
    .sections-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 30px;
      
      .section-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px solid #f0f0f0;
          
          h3 {
            color: #333;
            font-size: 18px;
          }
          
          a {
            color: #409eff;
            font-size: 14px;
            text-decoration: none;
            
            &:hover {
              color: #66b1ff;
            }
          }
        }
        
        .article-list {
          .article-item {
            display: flex;
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.3s;
            
            &:hover {
              background: #f8f9fa;
            }
            
            &:last-child {
              border-bottom: none;
            }
            
            img {
              width: 60px;
              height: 60px;
              object-fit: cover;
              border-radius: 6px;
              margin-right: 12px;
              flex-shrink: 0;
            }
            
            .article-info {
              flex: 1;
              
              h4 {
                font-size: 14px;
                color: #333;
                margin-bottom: 8px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
              
              p {
                font-size: 12px;
                color: #666;
                margin-bottom: 8px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
              
              .article-date,
              .article-views {
                font-size: 12px;
                color: #999;
              }
            }
            
            &.hot-item {
              .rank {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                background: #f0f0f0;
                color: #666;
                font-size: 12px;
                border-radius: 4px;
                margin-right: 12px;
                flex-shrink: 0;
                
                &.top {
                  background: #ff4d4f;
                  color: white;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home {
    .banner {
      .banner-content {
        padding: 20px 30px;
        
        h2 {
          font-size: 20px;
        }
        
        p {
          font-size: 14px;
        }
      }
    }
    
    .quick-nav {
      padding: 40px 0;
      
      .nav-grid {
        grid-template-columns: repeat(2, 1fr);
        
        .nav-item {
          padding: 20px;
          
          .nav-icon {
            font-size: 28px;
          }
          
          span {
            font-size: 14px;
          }
        }
      }
    }
    
    .content-sections {
      padding: 40px 0;
      
      .sections-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
  }
}
</style>